What the...
- 14(!) extra
<script>tags
Nate Young
April 5, 2014
goog.provide('example');
goog.require('goog.dom');
example.sayHello = function(message) {
goog.dom.getElement('hello').innerHTML = 'Hello ' + message;
};<html>
<head>
<title>Example: Hello World</title>
</head>
<body>
<div id="hello"></div>
<script src="../closure-library/closure/goog/base.js"></script>
<script src="hello.js"></script>
<script>
example.sayHello('TCCC 16!')
</script>
</body>
</html><script> tagsgoog.provide('example');
goog.require('goog.dom');
example.sayHello = function(message) {
goog.dom.getElement('hello').innerHTML = 'Hello ' + message;
};
example.sayHello('TCCC 16!');$ ./compile
<html>
<head>
<title>Example: Hello World</title>
<style>
#hello { font-size: 500% }
</style>
</head>
<body>
<div id="hello"></div>
<script src="hello-compiled.js"></script>
</body>
</html><script> tags$ cat compile
#!/bin/bash
python ../closure-library/closure/bin/calcdeps.py \
--path ../closure-library \
--input hello.js \
--compiler_jar ../closure-compiler/build/compiler.jar \
--output_mode compiled \
--compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" \
--compiler_flags="--define=goog.userAgent.ASSUME_WEBKIT=true" \
> hello-compiled.js$ ls -lah
drwxr-xr-x 6 nate.young 2023218408 204B Apr 4 21:05 .
drwxr-xr-x 11 nate.young 2023218408 374B Apr 4 20:54 ..
-rwxr-xr-x 1 nate.young 2023218408 289B Apr 4 21:04 compile
-rw-r--r-- 1 nate.young 2023218408 1.4K Apr 4 21:05 hello-compiled.js
-rw-r--r-- 1 nate.young 2023218408 226B Apr 4 21:01 hello.html
-rw-r--r-- 1 nate.young 2023218408 191B Apr 4 21:05 hello.js$ $EDITOR compile
...
--compiler_flags="--define=goog.userAgent.ASSUME_WEBKIT=true" \
> hello-compiled.js$ ls -lah
-rw-r--r-- 1 nate.young 2023218408 61B Apr 4 21:11 hello-compiled.js$ cat hello-compiled.js
document.getElementById("hello").innerHTML="Hello TCCC 16!";A compiler that turns code into JavaScript, when that code is, well, JavaScript
Compilation is not exactly conducive to flow
function translatePos(blocks, top_offset, left_offset, grid_height) {
for(var i = 0; i < blocks.length; i++) {
var blk = blocks[i];
var x = blk.x;
var y = blk.y;
blk.style.top = glbl_width * (grid_height - 1 - y) + top_offset;
blk.style.left = glbl_width * x + left_offset + border_width;
}
}function translatePos(a, b, c, d) {
for(var f = 0;f < a.length;f++) {
var e = a[f], g = e.x;
e.style.top = y * (d - 1 - e.y) + b;
e.style.left = y * g + c + z
}
}BANG = '!';
example.sayHello = function(message) {
goog.dom.getElement('hello').innerHTML = 'Hello ' + message + BANG;
};
example.sayHello('TCCC 16');
example.sayHello = function(message) {
goog.dom.getElement('hello').innerHTML = 'Hello ' + message + '!';
};
example.sayHello('TCCC 16');
goog.dom.getElement('hello').innerHTML = 'Hello ' + 'TCCC 16' + '!';
goog.dom.getElement('hello').innerHTML = 'Hello TCCC 16!';
really.long.dotted.namespace = function(x) { ... }really$long$dotted$namespace = function(x) { ... }really$long$dotted$namespace = function(x) { ... }goog.require('goog.string');
postMessage = function(gs, message) {
gs.htmlEscape(message) + '<hr>' + gs.htmlEscape(message)
}
postMessage(goog.string, 'I like <script> tags');example from Closure: The Definitive Guide by Michael Bolin
goog.string's source is 41Kgoog.require('goog.string');
postMessage = function(message) {
goog.string.htmlEscape(message) + '<hr>' + goog.string.htmlEscape(message)
}
postMessage('I like <script> tags');example from Closure: The Definitive Guide by Michael Bolin
goog.string's source is 41Kgoog.string.htmlEscape's source is 973B unoptimizedexample.Greeter.prototype.sayHello = function(subject) { ... }example$Greeter.prototype.a = function(subject) { ... }example$Greeter.prototype.a = function(subject) { ... }var choices = {
carnivore: function() { alert("I'll have the steak!"); }
herbivore: function() { alert("I'll have the creamed spinach!"); }
};
var pickOne = function(choice) {
choices[choice]();
};
pickOne('carnivore');example from Closure: The Definitive Guide by Michael Bolin
var a = {
a: function() { alert("I'll have the steak!"); }
b: function() { alert("I'll have the creamed spinach!"); }
};
var f = function(c) {
a[c]();
};
f('carnivore');example from Closure: The Definitive Guide by Michael Bolin
var choices = {
'carnivore': function() { alert("I'll have the steak!"); }
'herbivore': function() { alert("I'll have the creamed spinach!"); }
};
var pickOne = function(choice) {
choices[choice]();
};
pickOne('carnivore');example from Closure: The Definitive Guide by Michael Bolin
var a = {
'carnivore': function() { alert("I'll have the steak!"); }
'herbivore': function() { alert("I'll have the creamed spinach!"); }
};
var f = function(c) {
a[c]();
};
f('carnivore');example from Closure: The Definitive Guide by Michael Bolin
var choices = {
carnivore: function() { alert("I'll have the steak!"); }
herbivore: function() { alert("I'll have the creamed spinach!"); }
};
var pickOne = function(choicefn) {
choicefn();
};
pickOne(choices.carnivore);example from Closure: The Definitive Guide by Michael Bolin